<template>
    <transition name="ui-alert--transition-toggle">
        <div class="ui-alert" :class="classes" role="alert">
            <div class="ui-alert__body">
                <div class="ui-alert__icon" v-if="!removeIcon">
                    <slot name="icon">
                        <ui-icon v-if="type === 'info'">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.984 9V6.984h-1.97V9h1.97zm0 8.016v-6h-1.97v6h1.97zm-.984-15c5.53 0 9.984 4.453 9.984 9.984S17.53 21.984 12 21.984 2.016 17.53 2.016 12 6.47 2.016 12 2.016z"/></svg>
                        </ui-icon>

                        <ui-icon v-if="type === 'success'">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.984 17.016l9-9-1.406-1.453-7.594 7.594-3.563-3.563L5.016 12zm2.016-15c5.53 0 9.984 4.453 9.984 9.984S17.53 21.984 12 21.984 2.016 17.53 2.016 12 6.47 2.016 12 2.016z"/></svg>
                        </ui-icon>

                        <ui-icon v-if="type === 'warning'">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.984 14.016v-4.03h-1.97v4.03h1.97zm0 3.984v-2.016h-1.97V18h1.97zm-12 3L12 2.016 23.016 21H.986z"/></svg>
                        </ui-icon>

                        <ui-icon v-if="type === 'error'">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.984 12.984v-6h-1.97v6h1.97zm0 4.032V15h-1.97v2.016h1.97zm-.984-15c5.53 0 9.984 4.453 9.984 9.984S17.53 21.984 12 21.984 2.016 17.53 2.016 12 6.47 2.016 12 2.016z"/></svg>
                        </ui-icon>
                    </slot>
                </div>

                <div class="ui-alert__content">
                    <slot></slot>
                </div>

                <div class="ui-alert__dismiss-button">
                    <ui-close-button
                        size="small"

                        @click="dismissAlert"

                        v-if="dismissible"
                    ></ui-close-button>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
import UiCloseButton from './UiCloseButton.vue';
import UiIcon from './UiIcon.vue';

export default {
    name: 'ui-alert',

    props: {
        type: {
            type: String,
            default: 'info' // 'info', 'success', 'warning', or 'error'
        },
        removeIcon: {
            type: Boolean,
            default: false
        },
        dismissible: {
            type: Boolean,
            default: true
        }
    },

    computed: {
        classes() {
            return [
                `ui-alert--type-${this.type}`
            ];
        }
    },

    methods: {
        dismissAlert() {
            this.$emit('dismiss');
        }
    },

    components: {
        UiCloseButton,
        UiIcon
    }
};
</script>

<style lang="scss">
@import './styles/imports';

$ui-alert-color             : rgba(black, 0.75) !default;
$ui-alert-font-size         : rem-calc(15px) !default;
$ui-alert-margin-bottom     : rem-calc(16px) !default;

.ui-alert {
    display: flex;
    font-family: $font-stack;
    font-size: $ui-alert-font-size;
    line-height: 1.4;
    margin-bottom: $ui-alert-margin-bottom;
    overflow: hidden;
    position: relative;
    transition: margin-bottom 0.3s;
    width: 100%;

    a {
        text-decoration: none;

        &:hover,
        &:focus {
            text-decoration: underline;
        }
    }
}

.ui-alert__icon {
    align-self: flex-start;
    flex-shrink: 0;
    margin-right: rem-calc(12px);
}

.ui-alert__body {
    align-items: center;
    color: $ui-alert-color;
    display: flex;
    flex-direction: row;
    margin-bottom: 0;
    margin-top: 0;
    min-height: rem-calc(48px);
    padding: rem-calc(12px 16px);
    transition: opacity 0.3s, margin-top 0.4s;
    width: 100%;
}

.ui-alert__content {
    flex-grow: 1;
}

.ui-alert__dismiss-button {
    align-self: flex-start;
    flex-shrink: 0;
    margin-bottom: rem-calc(-4px);
    margin-left: rem-calc(8px);
    margin-right: rem-calc(-8px);
    margin-top: rem-calc(-4px);
}

// ================================================
// Types
// ================================================

.ui-alert--type-info {
    .ui-alert__body {
        background-color: rgba($md-blue, 0.12);
    }

    .ui-alert__icon {
        color: $md-blue;
    }

    a {
        color: $md-blue;
    }
}

.ui-alert--type-success {
    .ui-alert__body {
        background-color: rgba($md-green, 0.12);
    }

    .ui-alert__icon {
        color: $md-green;
    }

    a {
        color: $md-green;
    }
}

.ui-alert--type-warning {
    .ui-alert__body {
        background-color: rgba($md-orange, 0.12);
    }

    .ui-alert__icon {
        color: $md-orange;
    }

    a {
        color: $md-orange;
    }
}

.ui-alert--type-error  {
    .ui-alert__body {
        background-color: rgba($md-red, 0.12);
    }

    .ui-alert__icon {
        color: $md-red;
    }

    a {
        color: $md-red;
    }
}

// ================================================
// Transition
// ================================================

.ui-alert--transition-toggle-enter,
.ui-alert--transition-toggle-leave-active {
    margin-bottom: 0;

    .ui-alert__body {
        margin-top: rem-calc(-56px);
        opacity: 0;
    }
}
</style>
